<template>
	<view class="memberVip" :data-theme="theme">
		<view class="bg">
			<view class="header">
				<view class="picTxt acea-row row-middle">
					<view class="pictrue">
						<image :src="userInfo.avatar"></image>
					</view>
					<view class="text acea-row row-middle">
						<view class="name line1">{{ userInfo.nickname }}</view>
						<view class="vip" v-if="userInfo.vip">
							<image :src="userInfo.vipIcon"></image>{{ userInfo.vipName }}
						</view>
					</view>
				</view>
			</view>
			<view class="experience">
				<view class="title">当前经验值</view>
				<view class="num">{{ levelInfo }}</view>
				<view class="axis">
					<view class="bar">
						<view class="barCon">
							<view
								class="solidBar"
								:style="'width: ' + widthLen + '%;'"
							></view>
						</view>
						<view class="acea-row row-around row-middle">
							<view
								class="spotw acea-row row-center"
								v-for="(item, index) in levelList"
								:key="index"
							>
								<view
									class="spot"
									:class="
										current > item.experience
											? 'past'
											: '' + ' ' + current == item.experience
											? 'on'
											: ''
									"
								>
								</view>
							</view>
						</view>
					</view>
					<view class="numList acea-row row-around row-middle">
						<view
							class="item"
							:class="current >= item.experience ? 'past' : ''"
							v-for="(item, index) in levelList"
							:key="index"
							>{{ item.experience }}</view
						>
					</view>
				</view>
				<view class="vipList acea-row">
					<view class="item">
						<view class="pictrue">
							<image src="./../static/vip01.png"></image>
						</view>
						<view class="name">会员折扣</view>
					</view>
					<view class="item">
						<view class="pictrue">
							<image src="./../static/vip02.png"></image>
						</view>
						<view class="name">专属徽章</view>
					</view>
					<view class="item">
						<view class="pictrue">
							<image src="./../static/vip03.png"></image>
						</view>
						<view class="name">会员升级</view>
					</view>
					<view class="item">
						<view class="pictrue">
							<image src="./../static/vip04.png"></image>
						</view>
						<view class="name">经验积累</view>
					</view>
					<view class="item">
						<view class="pictrue">
							<image src="./../static/vip05.png"></image>
						</view>
						<view class="name">更多特权</view>
					</view>
				</view>
			</view>
			<view class="module">
				<view class="public_title acea-row row-middle">
					<view class="icons"></view>获取经验
				</view>
				<view class="gainList">
					<view class="item acea-row row-between-wrapper">
						<view class="picTxt acea-row row-middle">
							<view class="pictrue"
								><text class="iconfont icon-qiandao2"></text
							></view>
							<view class="text">
								<view class="name line1">签到</view>
								<view class="info line1">每日签到可获得经验值</view>
							</view>
						</view>
						<navigator
							url="/pages/users/user_sgin/index"
							class="button"
							hover-class="none"
							>去获取</navigator
						>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view class="picTxt acea-row row-middle">
							<view class="pictrue on"
								><text class="iconfont icon-shangpin"></text
							></view>
							<view class="text">
								<view class="name line1">购买商品</view>
								<view class="info line1">购买商品可获得对应是经验值</view>
							</view>
						</view>
						<navigator
							url="/pages/goods_cate/goods_cate"
							class="button"
							hover-class="none"
							open-type="switchTab"
							>去获取</navigator
						>
					</view>
					<!-- <view class="item acea-row row-between-wrapper">
						<view class="picTxt acea-row row-middle">
							<view class="pictrue on2"><text class="iconfont icon-yaoqing"></text></view>
							<view class="text">
								<view class="name line1">邀请好友</view>
								<view class="info line1">邀请好友注册商城可获得经验值</view>
							</view>
						</view>
						<navigator url="/pages/users/user_spread_code/index" class="button" hover-class="none">去获取</navigator>
					</view> -->
				</view>
			</view>
		</view>
		<view class="detailed" v-if="expList.length">
			<view class="public_title acea-row row-middle">
				<view class="icons"></view>经验值明细
			</view>
			<view class="list">
				<view
					class="item acea-row row-between-wrapper"
					v-for="(item, index) in expList"
					:key="index"
				>
					<view class="text">
						<view class="name">{{ item.title }}</view>
						<view class="data">{{ item.createTime }}</view>
					</view>
					<view class="num" v-if="item.type == 1">+{{ item.experience }}</view>
					<view class="num on" v-else>-{{ item.experience }}</view>
				</view>
			</view>
		</view>
		<view class="loadingicon acea-row row-center-wrapper" v-if="expList.length">
			<text
				class="loading iconfont icon-jiazai"
				:hidden="loading == false"
			></text
			>{{ loadTitle }}
		</view>
	</view>
</template>

<script>
import { mapState } from "pinia";
import { useAppStore } from "@/stores/app";
import { getlevelInfo, getlevelExpList } from "@/api/user.js";
let app = getApp();
export default {
	computed: mapState(useAppStore, ["userInfo"]),
	data() {
		return {
			//userInfo: '',
			levelInfo: "",
			levelList: [],
			current: 0,
			widthLen: 0,
			loading: false,
			loadend: false,
			loadTitle: this.$t(`page.goodsList.more`), //提示语
			page: 1,
			limit: 20,
			expList: [],
			theme: "theme3",
		};
	},
	onLoad() {
		this.levelInfo = this.userInfo.experience;
		this.getInfo();
		this.getlevelList();
	},
	methods: {
		getInfo: function () {
			let that = this;
			getlevelInfo()
				.then((res) => {
					let levelList = res.data;
					let list = [];
					that.levelList = levelList;
					levelList.map((item, index) => {
						if (item.experience <= that.levelInfo) {
							list.push(item.experience);
						}
					});
					let maxn = Math.max.apply(null, list);
					that.current = maxn;
					// 解决len取的值没有时；
					let levelListLen = levelList[list.length]
						? levelList[list.length]
						: levelList[list.length - 1];
					// 解决除数不能为0
					let divisor =
						levelListLen.experience - maxn ? levelListLen.experience - maxn : 1;
					// 每小格所占的百分比
					let per = (that.levelInfo - maxn) / divisor / levelList.length;

					that.widthLen =
						((list.length - 0.5) / levelList.length) * 100 + per * 100;
				})
				.catch(function (res) {
					return that.$util.Tips({
						title: res,
					});
				});
		},
		getlevelList: function () {
			let that = this;
			if (this.loadend) return false;
			if (this.loading) return false;
			getlevelExpList({
				page: that.page,
				limit: that.limit,
			})
				.then((res) => {
					let list = res.data.list,
						loadend = list.length < that.limit;
					let expList = that.$util.SplitArray(list, that.expList);
					that.$set(that, "expList", expList);
					that.loadend = loadend;
					//this.$t('page.goodsList.nono')
					that.loadTitle = loadend ? "" : this.$t("page.goodsList.more");
					that.page = that.page + 1;
					that.loading = false;
				})
				.catch((err) => {
					that.loading = false;
					that.loadTitle = this.$t("page.goodsList.more");
				});
		},
	},
	onReachBottom: function () {
		this.getlevelList();
	},
};
</script>

<style lang="scss">
.memberVip {
	.bg {
		background-color: #fff;

		.header {
			background-image: url("");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 380rpx;
			background-color: #fff;

			.picTxt {
				padding: 28rpx 39rpx;

				.pictrue {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.text {
					color: #fae2c1;
					margin-left: 23rpx;

					.name {
						max-width: 385rpx;
					}

					.vip {
						padding: 6rpx 18rpx;
						border: 1px solid rgba(250, 226, 193, 1);
						border-radius: 20rpx;
						font-size: 18rpx;
						margin-left: 15rpx;
						display: flex;
						align-items: center;

						image {
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							margin-right: 8rpx;
						}
					}
				}
			}
		}

		.experience {
			background-image: url("");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 690rpx;
			height: 360rpx;
			margin: -250rpx auto 0 auto;
			border-radius: 23rpx;
			padding: 22rpx 27rpx;
			box-sizing: border-box;

			.title {
				font-size: 24rpx;
				color: #ae8b4a;
			}

			.num {
				font-size: 60rpx;
				color: #775c29;
				margin-top: 6rpx;
			}

			.axis {
				margin: 10rpx 0 15rpx 0;
				overflow: hidden;

				.bar {
					width: 630rpx;

					.spotw {
						width: 96rpx;
					}

					.barCon {
						width: 100%;
						height: 3rpx;
						background: #d7bd89;
						border-radius: 2rpx;

						.solidBar {
							width: 0;
							height: 100%;
							background: #775c29;
							border-radius: 2rpx;
							transition: width 0.6s ease;
						}
					}

					.spot {
						width: 8rpx;
						height: 8rpx;
						background: #d7bd89;
						border-radius: 50%;
						margin-top: -5rpx;

						&.past {
							background: #775c29;
						}

						&.on {
							background: #775c29;
							box-shadow: 0rpx 0rpx 8rpx #000;
						}
					}
				}

				.numList {
					font-size: 26rpx;
					color: #d7bd89;
					margin-top: 14rpx;

					.item {
						width: 96rpx;
						text-align: center;

						&.past {
							color: #775c29;
						}
					}
				}
			}

			.vipList {
				.item {
					width: 20%;
					text-align: center;

					.pictrue {
						width: 70rpx;
						height: 70rpx;
						margin: 0 auto;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						font-size: 24rpx;
						color: #403d4e;
						margin-top: 18rpx;
					}
				}
			}
		}

		.module {
			padding: 40rpx 30rpx 0 30rpx;

			.gainList {
				margin-top: 10rpx;

				.item {
					height: 130rpx;
					position: relative;

					.picTxt {
						.pictrue {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							background: linear-gradient(
								-45deg,
								rgba(249, 119, 107, 1) 0%,
								rgba(255, 147, 137, 1) 100%
							);
							text-align: center;
							line-height: 70rpx;
							color: #fff;

							&.on {
								background: linear-gradient(
									-45deg,
									rgba(254, 160, 96, 1) 0%,
									rgba(255, 204, 170, 1) 100%
								);
							}

							&.on2 {
								background: linear-gradient(
									-45deg,
									rgba(157, 208, 116, 1) 0%,
									rgba(161, 214, 124, 1) 100%
								);
							}
						}

						.text {
							margin-left: 30rpx;
							width: 400rpx;

							.name {
								font-size: 30rpx;
								color: #282828;
							}

							.info {
								font-size: 24rpx;
								color: #999999;
								margin-top: 6rpx;
							}
						}
					}

					.button {
						width: 140rpx;
						height: 50rpx;
						background: linear-gradient(
							-90deg,
							rgba(231, 182, 103, 1) 0%,
							rgba(255, 234, 181, 1) 100%
						);
						border-radius: 25rpx;
						text-align: center;
						line-height: 50rpx;
						font-size: 26rpx;
						color: #8d5306;
					}

					& ~ .item {
						&::after {
							position: absolute;
							content: " ";
							width: 720rpx;
							height: 1rpx;
							background: rgba(245, 245, 245, 1);
							top: 0;
							left: 0;
						}
					}
				}
			}
		}
	}

	.public_title {
		color: #282828;
		font-size: 30rpx;

		.icons {
			width: 6rpx;
			height: 28rpx;
			background: rgba(230, 192, 131, 1);
			margin-right: 10rpx;
		}
	}

	.detailed {
		padding: 30rpx 30rpx 0 30rpx;
		margin-top: 15rpx;
		background-color: #fff;

		.list {
			margin-top: 15rpx;

			.item {
				height: 122rpx;
				border-bottom: 1px solid #eeeeee;

				.text {
					.name {
						font-size: 28rpx;
						color: #282828;
					}

					.data {
						color: #999;
						font-size: 24rpx;
					}
				}

				.num {
					font-size: 32rpx;
					color: $theme-color;
				}

				.on {
					color: #16ac57;
				}
			}
		}
	}
}
</style>
